<template>
  <div style="height:100%;display: flex;flex-direction:column;">
    <div class="hello">
      <dynamic-form :schema="formSchema1" :model="model">
      </dynamic-form>
    </div>
    <div>
      <p>Model:</p>
      {{model}}
    </div>
    <div style="width:400px;margin-left:20px;flex:1;height:0;min-height:0;">
      <data-grid :config="dgConfig"></data-grid>
    </div>
    <button class="btn btn-lg btn-success">Hello</button>
    <button class="btn btn-sm btn-success">Hello</button>
    <button class="btn btn-xs btn-success">Hello</button>
    <button class="btn btn-link">Hello</button>
    <button class="btn btn-link-dark">Hello</button>
    <button class="btn btn-link-danger" disabled>Hello</button>
    <button class="btn btn-outline-success">Hello</button>
  </div>
</template>

<script>
  import DynamicForm from '../../src/dynamic-form'
  import FormGroup from '../../src/dynamic-form/components/FormGroup.vue'
  import DataGrid from '../../src/data-grid'

  export default {
    components: {DynamicForm, FormGroup, DataGrid},
    data () {
      return {
        dgConfig: {
          columns: [
            {
              field: 'id',
              title: '编号',
              checkbox: true,
              checkAll: true,
              resizable: true,
              defaultZort: 'desc',
              width: 120,
              fixed: 'left'
            },
            {
              field: 'name',
              title: '名称',
              resizable: true,
              defaultZort: 'desc'
            },
            {
              field: 'name1',
              title: '名称1',
              resizable: true,
              defaultZort: 'desc'
            },
            {
              field: 'name2',
              title: '名称2',
              resizable: true,
              defaultZort: 'desc'
            },
            {
              field: 'name3',
              title: '名称3',
              resizable: true,
              defaultZort: 'desc'
            }
          ],
          autoLoad: true,
          selectionMultiple: true,
          // rowCheckDisabled (row) {
          //   return row.id === 1
          // },
          // rowSelectionDisabled (row) {
          //   return row.id === 1
          // },
          selectionNotEqualsChecking: false,
          checkStateIgnoreDisabled: false,
          dataSource: [
            {id: 1, name: '01'},
            {id: 2, name: '02'},
            {id: 3, name: '03'},
            {id: 2, name: '02'},
            {id: 3, name: '03'},
            {id: 2, name: '02'},
            {id: 3, name: '03'},
            {id: 2, name: '02'},
            {id: 3, name: '03'}
          ]
        },
        model: {tt: 1, model: 2, color: true, manufacturer: ['Hello'], brand: true},
        formSchema: {},
        field: {
          componentType: 'InputText',
          name: 'name1',
          label: '商品名',
          validators: {
            required: true,
            maxLength: 20,
            notEqualTo: '${name1}',
            dependsOn: 'name1'
          }
        },
        field2: {
          componentType: 'InputText',
          name: 'name_1',
          label: '商品名',
          validators: {
            required: true,
            maxLength: 20
          }
        },
        field1: {
          name: 'name1',
          label: '商品名1',
          fields: [],
          repeatable: true
        },
        formSchema1: {
          formClass: 'va-df-form-horizontal-60 va-df-form-inline',
          fields: [
            {
              name: 'basic',
              label: '基础信息',
//              inputWrapperClass: 'va-grid-4',
              fields: [
                {
                  componentType: 'InputText',
                  name: 'name',
                  label: '商品名',
//                  formGroupStyle: {width: '50%'},
                  validators: {
                    required: true,
                    maxLength: 20
                  }
                },
//                {
//                  componentType: 'InputCombo',
//                  name: 'categoryids',
//                  label: '所属类目',
//                  formGroupStyle: {width: '50%'},
//                  dataSource () {
//                    return [{id: 1, name: 'C1'}, {id: 2, name: 'C2'}]
//                  },
//                  comboMultiSelection: true,
//                  tableFullWidth: true,
//                  valueProp: 'id',
//                  displayProp: 'name',
//                  comboExpandColumnIndex: 0,
//                  comboColumns: [{
//                    checkbox: true,
//                    field: 'name'
//                  }],
//                  validators: {
//                    required: true
//                  }
//                },
                {
                  componentType: 'InputRate',
                  count: 5,
                  allowHalf: true,
                  name: 'model',
                  label: '型号',
                  disabled: false
                },
                {
                  componentType: 'InputSelect',
                  name: 'unit',
                  label: '计量单位',
                  optionValueProp: 'id',
                  optionLabelProp: 'name',
                  disabled: false,
                  dataSource: [{id: 1, name: 'a'}, {id: 2, name: 'b'}]
                },
                {
                  componentType: 'InputSwitch',
                  name: 'tt',
                  label: '计量单位',
                  trueLabel: '正',
                  falseLabel: '反',
                  trueValue: 1,
                  falseValue: 0,
                  disabled: true
                },
                {
                  componentType: 'InputCheckboxGroup',
                  name: 'manufacturer',
                  label: '厂商',
                  dataSource () {
                    return new Promise((resolve) => {
                      setTimeout(() => {
                        resolve([
                          'Hello',
                          'World',
                          null
                        ])
                      }, 1000)
                    })
                  },
                  itemDisabled (item) {
                    console.log(item, 'item')
                    return item === 'Hello'
                  },
                  disabled: false
                },
                {
                  componentType: 'InputCheckboxGroup',
                  name: 't11',
                  label: '厂商',
                  dataSource: [
                    'Hello',
                    'World',
                    null
                  ],
                  itemDisabled (item) {
                    console.log(item, 'item')
                    return item === 'Hello'
                  },
                  single: true,
                  disabled: false
                },
//                {
//                  componentType: 'InputCombo',
//                  name: 'orderstate',
//                  label: '状态',
//                  comboPanelStyle: {'min-width': '400px'},
//                  dataSource () {
//                    return [
//                      {id: -2, name: '所有'},
//                      {id: -1, name: '已取消'},
//                      {id: 0, name: '未支付'},
//                      {id: 1, name: '待确asdfasdfasdfasdfasdfasdfasdfasdfasdf认'},
//                      {id: 2, name: '待发货'},
//                      {id: 3, name: '待收货'},
//                      {id: 4, name: '待评论'},
//                      {id: 5, name: '已完结'}
//                    ]
//                  },
//                  tableFullWidth: true,
//                  valueProp: 'id',
//                  displayProp: 'name',
//                  comboMultiSelection: true,
//                  comboHeadVisible: true,
//                  comboColumns: [
//                    {
//                      checkbox: true,
//                      checkboxAll: true,
//                      field: 'checked'
//                    },
//                    {
//                      field: 'name',
//                      title: '名称'
//                    }
//                  ]
//                },
                {
                  componentType: 'InputCombo',
                  name: 'single',
                  label: '单选',
                  dataSource () {
                    return [
//                      {id: null, name: '选择1'},
                      {id: 2, name: '选择2'},
                      {id: 3, name: '选择3'},
                      {id: 4, name: '选择4'}
                    ]
                  },
                  tableFullWidth: true,
                  valueProp: 'id',
                  displayProp: 'name',
                  comboMultiSelection: false,
                  comboHeadVisible: false,
                  comboEnableToggleSelection: true, // 仅对于单选有效，默认false
                  comboColumns: [
                    {
                      field: 'name',
                      title: '名称'
                    }
                  ]
                },
                {
                  componentType: 'InputCheckbox',
                  name: 'color',
                  label: '颜色',
                  disabled: true
                },
                {
                  componentType: 'InputRadio',
                  name: 'brand',
                  label: '品牌',
                  disabled: true
                },
                {
                  componentType: 'InputRadioGroup',
                  name: 'ttt',
                  label: 'ttt',
                  dataSource () {
                    return new Promise((resolve) => {
                      setTimeout(() => {
                        resolve([
                          'Hello',
                          'World',
                          false,
                          1
                        ])
                      }, 1000)
                    })
                  },
                  itemDisabled (item) {
                    console.log(item, 'item')
                    return item === 'Hello'
                  },
                  disabled: false
                },
                {
                  componentType: 'InputTextarea',
                  name: 'description',
                  label: '商品描述',
                  textareaRows: 6
//                  formGroupStyle: {width: '100%'}
                },
                {
                  componentType: 'InputText',
//                  formGroupStyle: {width: '50%'},
                  name: 'salesvolume',
                  inputPattern: 'number_positive',
                  inputDataType: 'number',
                  label: '销量',
                  validators: {
                    required: true
                  }
                },
//                {
//                  componentType: 'InputTags',
//                  name: 'tags',
//                  label: '标签',
//                  formGroupStyle: {width: '50%'},
//                  tagDataLoader (name) {
//                    name = name || undefined
//                    return []
//                  }
//                },
                {
                  name: 'props',
                  label: '属性设置',
                  description: '【重要】表示此属性会直接显示在商品详情页面中',
                  labelStyle: {'font-size': '12px'},
//                  formGroupStyle: {width: '100%'},
                  repeatItemWrapperClass: 'df-form-horizontal-100',
                  repeatActionsWrapperStyle: {'text-align': 'center'},
                  repeatActionButtonClass: 'btn btn-xs btn-primary',
                  repeatable: true,
                  fields: [
                    {
                      componentType: 'InputText',
                      name: 'name',
                      label: '属性名称',
                      validators: {
                        required: true
                      }
                    },
                    {
                      componentType: 'InputText',
                      name: 'value',
                      label: '属性值',
                      validators: {
                        required: true
                      }
//                    },
//                    {
//                      componentType: 'InputCheckbox',
//                      name: 'important',
//                      label: '重要性',
//                      trueValue: 1,
//                      falseValue: 0
                    }
                  ]
                }
              ]
            },
            {
              name: 'price',
              label: '销售设置',
              inputWrapperClass: 'df-form-horizontal-100',
              fields: [
//                {
//                  componentType: 'InputCheckbox',
//                  name: 'onsale',
//                  label: '在售',
//                  trueValue: 1,
//                  falseValue: 0
//                },
                {
                  componentType: 'InputText',
                  name: 'stock',
                  label: '初始库存',
                  inputPattern: 'number_positive',
                  inputDataType: 'number',
                  validators: {
                    required: true,
                    min: 0
                  }
                },
                {
                  componentType: 'InputText',
                  name: 'originalprice',
                  label: '原价',
                  inputPattern: 'number_positive',
                  inputDataType: 'number',
                  validators: {
                    required: true,
                    min: 0
                  }
                },
                // {
                //   componentType: 'InputText',
                //   name: 'minprice',
                //   label: '最低折扣价',
                //   inputPattern: 'number_positive',
                //   inputDataType: 'number',
                //   validators: {
                //     required: true,
                //     min: 0
                //   }
                // },
                {
                  name: 'discountSetting',
                  label: '折扣设置',
                  labelStyle: {'font-size': '12px'},
                  formGroupStyle: {width: '100%'},
//                  repeatItemWrapperClass: 'va-grid-4',
                  repeatActionsWrapperStyle: {'text-align': 'center'},
                  repeatActionButtonClass: 'btn btn-xs btn-primary',
                  repeatable: true,
                  description: '所有折扣概率相加应该等于100',
                  fields: [
                    {
                      componentType: 'InputText',
                      name: 'name',
                      label: '名称',
                      labelStyle: {width: '60px'},
                      validators: {
                        required: true,
                        maxLength: 20
                      }
                    },
                    {
                      componentType: 'InputText',
                      name: 'discount',
                      label: '折扣',
                      addon: '折',
                      inputPattern: 'number_positive',
                      labelStyle: {width: '60px'},
                      inputDataType: 'number',
                      validators: {
                        required: true,
                        max: 10,
                        min: 0
                      }
                    },
                    {
                      componentType: 'InputText',
                      name: 'probability',
                      label: '概率',
                      addon: '%',
                      inputPattern: 'number_positive',
                      inputDataType: 'number',
                      labelStyle: {width: '60px'},
                      validators: {
                        required: true,
                        max: 100,
                        min: 0
                      }
                    }
                  ]
                }
              ]
//            },
//            {
//              name: 'hotsetting',
//              label: '热销设置',
//              inputWrapperClass: 'va-grid-4',
//              fields: [
//                {
//                  componentType: 'InputCheckbox',
//                  name: 'hot',
//                  label: '热销商品',
//                  trueValue: 1,
//                  falseValue: 0
//                },
//                {
//                  componentType: 'InputText',
//                  name: 'displayorder',
//                  inputPattern: 'number_positive',
//                  inputDataType: 'number',
//                  label: '显示顺序'
//                }
//              ]
            }
          ]
        }
      }
    },
    mounted () {
      console.log('route', this.$router, this.$route)
    }
  }
</script>
